<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Test Images</title>
    <link rel="stylesheet" href="light.css" />
  </head>
  <body>
    <noscript>
      <strong
        >niivue doesn't work properly without JavaScript enabled. Please enable
        it to continue.</strong
      >
    </noscript>
    <header>
      <section>
        Formats: <label id="localimages"></label>
        <p>
        Modalities: <label id="webimages"></label>
      </section>
    </header>
    <main id="container">
      <canvas id="gl1"></canvas>
    </main>
    <footer>
      <label id="colormaps"></label>
    </footer>
  </body>
</html>
<script type="module">
  import * as niivue from "../dist/index.js";
  
  var volumeList1 = [
    // first item is background image
    {
      url: "../images/mni152.nii.gz",
      colormap: "gray",
      opacity: 1,
      visible: true,
    },
  ];
  var nv1 = new niivue.Niivue({ backColor: [0.7, 0.7, 0.9, 1] });
  await nv1.attachTo("gl1");
  nv1.loadVolumes(volumeList1);
  nv1.opts.isColorbar = true;
  nv1.setSliceType(nv1.sliceTypeRender);
  nv1.setClipPlane([0.35, 270, 0]);
  //nv1.setSliceType(nv1.sliceTypeMultiplanar)
  let localImgs = ['FLAIR.nrrd','cactus.nii.gz', 'DoG.png', "anat_final.FT+tlrc.HEAD", "mha.mha", "template.mif.gz", "trix/fa.mif", "dsistudio.src.gz", "dsistudio.fib.gz","wm.mgz"];
  for (let i = 0; i < localImgs.length; i++) {
    let btn = document.createElement("button");
    btn.innerHTML = localImgs[i];
    btn.onclick = function () {
      let img = "../images/" + localImgs[i];
      const volumeObj = { url: img };
      // If the image ends with ".HEAD", add the detached image data URL
      if (localImgs[i].endsWith(".HEAD")) {
        volumeObj.urlImgData = img.replace(".HEAD", ".BRIK");
      }
      nv1.loadVolumes([ volumeObj ])
    }
    localimages.appendChild(btn);
  }
  let imgs = [
    "chris_MRA",
    "chris_PD",
    "chris_t1",
    "chris_t2",
    "CT_Abdo",
    "CT_AVM",
    "CT_Electrodes",
    "CT_Philips",
    "CT_pitch",
    "fmri_pitch",
    "Iguana",
    "mni152",
    "MR_Gd",
    "pcasl",
    "spm152",
    "spmMotor",
    "visiblehuman",
    "rgb_bmp.jpg",
    "gray_bmp.png",
    "HCD1464653.qsdr.fz"
  ];
  for (let i = 0; i < imgs.length; i++) {
    let btn = document.createElement("button");
    btn.innerHTML = imgs[i];
    btn.onclick = function () {
      let root = "https://niivue.github.io/niivue-demo-images/";
      let img = root + imgs[i]
      if (!img.endsWith('.png') && !img.endsWith('.jpg') && !img.endsWith('fz'))
        img += ".nii.gz";
      console.log("Loading: " + img);
      volumeList1[0].url = img;
      nv1.loadVolumes(volumeList1);
      nv1.updateGLVolume();
    };
    webimages.appendChild(btn);
  }
  let cmaps = nv1.colormaps();
  let cmapEl = document.getElementById("colormaps");
  for (let i = 0; i < cmaps.length; i++) {
    let btn = document.createElement("button");
    btn.innerHTML = cmaps[i];
    btn.onclick = function () {
      nv1.setColormap(nv1.volumes[0].id, cmaps[i]);
    };
    cmapEl.appendChild(btn);
  }
</script>